<template>
	<eui-page-frame topHeight="330">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<eui-nav-bar />
			</view>
		</template>
		<eui-page-content>
			<eui-base-card class="sumDataCard data-card" title="报事跟踪" titleLine="true">
				<view v-for="(item, index) in sumData">
					<eui-progress :key="index" @click="onProgressClick(item)" :title="item.title" titleAlign="left"
						:total="item.allAmount" :value="item.completeAmount" :subTitle="item.subTitle" barRadius="10px"
						textOut="true" :textColor="themeColor" textSize="14px" barHeight="10px" animation="true"
						percentum="true"
						:contentColor="contentColor">
					</eui-progress>
					<eui-line></eui-line>
				</view>
				<view v-if="sumData.length == 0">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
				</view>
			</eui-base-card>

			<eui-base-card>
				<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" @change="tabChange"></eui-tab>
				<eui-line></eui-line>
				<view v-for="(item, index) in dataList" :key="index" class="card-item-box">
					<eui-base-card  @click="openDetail(item)" bottomLine="true" 
					:title="item.project" class="card_item">
						<template #left>
							<view class="e-attachment">
								<image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
							</view>
						</template>
						<template #right>
							<eui-tag :text="item.status" :type="'待评价,已完成'.includes(item.status)?'success':(item.status=='已驳回'?'warning':undefined)" plain plainFill :showBorder="false"> </eui-tag>
						</template>
						<eui-detail-show :items="dataItems" v-model="dataList[index]" size="small"></eui-detail-show>
					</eui-base-card>
				</view>
				

				<view v-if="dataList.length == 0" class="nodata">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
				</view>
			</eui-base-card>
		</eui-page-content>
	</eui-page-frame>
</template>


<script setup lang="ts">
import { onShow, onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import useService from '@/hooks/useService';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_bssq_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_bssq_orange.png);'
const themeColor = ref(theme._object.theme=='theme-blue'?'#02B7E6':'#FF6430')
const contentColor= ref(theme._object.theme=='theme-blue'?"linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)":'linear-gradient( 135deg, #FF8359 0%, #FF6430 100%)')
const service = useService({ prefix: "apiApi" });

const whereList = ref([
	{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DH', c_logic: "而且" }
])

const dataItems = [
	{
		label: "报备人",
		prop: "user",
		type: "text",
		element: {
		},
	},
	{
		label: "报备日期",
		prop: "date",
		type: "text",
		element: {
			mode: 'YYYY-MM-DD'
		},
	},
	{
		label: "报备内容",
		prop: "content",
		type: "text",
		element: {
		},
	},
]

const tabData = ref([{ name: '全部' }, { name: '待处理' }, { name: '已处理' }, { name: '已驳回' }]);

const tabIndex = ref(0);
const spaceLeft = ref(6);

const sumData = ref([
	// { title: '环境卫生', allAmount: 100, completeAmount: 30, subTitle: '每天', sdt: '', edt: '', frequency: '' },
	// { title: '三关一闭', allAmount: 100, completeAmount: 50, subTitle: '每天', sdt: '', edt: '', frequency: '' },
]);
const dataList = ref([
	//  { project: '', user: '', date: '', content: '', status: '', cover: '../../../static/img/homeImgs/notfound.png' },
]);

const onProgressClick = (e) => {
	uni.navigateTo({
		url: `./statistical?project=${encodeURIComponent(e.title)}&stdt=${encodeURIComponent(e.sdt)}&edt=${encodeURIComponent(e.edt)}&frequency=${encodeURIComponent(e.frequency)}`
	});
}

const tabChange = (e) => {
	tabIndex.value = e;
	const value = e === 1 ? '0,1' : (e === 2 ? '3,4' : (e === 3 ? '9' : ''));
	if (value) {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DH', c_logic: "而且" },
			{ c_col: "c_work_status", c_oper: "包含", c_value: value, c_logic: "而且" },
		]
	}
	else {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DH', c_logic: "而且" },
		]
	}
	getReportData();
}

onShow(() => {
	getReportStatisticalData();
	getReportData();
})

const getReportStatisticalData = async () => {
	sumData.value = [];
	uni.showLoading("查询中...");
	const res = await service.request('管易通物业模块服务', 'GetReportStatisticalData', "");
	uni.hideLoading();
	if (res) {
		console.log('返回数据', JSON.stringify(res))
		const objectData = res;
		if (objectData.length > 0) {
			sumData.value = objectData.map(x => {
				return {
					title: x.c_property_type_name,
					allAmount: x.c_con_count,
					completeAmount: x.c_report_count,
					subTitle: x.c_sub_title,
					sdt: x.c_st_dt,
					edt: x.c_en_dt,
					frequency: x.c_frequency
				}
			});
		}
	}
}

//获取报事申请数据
const getReportData = async () => {
	const req = {
		WhereList: whereList.value
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通物业模块服务', 'EnjoyQueryList', req);
	uni.hideLoading();
	dataList.value = [];
	if (res && res.ReturnObject) {
		console.log('申请数据', JSON.stringify(res.ReturnObject))
		const objectData = res.ReturnObject;
		if (objectData.length > 0) {
			dataList.value = objectData.map(x => {
				return {
					c_work_id: x.c_work_id,
					project: x.c_property_type_name,
					user: x.c_req_user,
					date: x.c_req_dt,
					content: x.c_question,
					status: x.c_work_status_name,
					cover: !x.c_brand_logo? '../../../static/img/no_image.png': service.getBaseUrl() + '/File/DownLoadFile/' + x.c_brand_logo,
				}
			});
		}
	}
}
const openDetail = (e) => {
	uni.navigateTo({
		url: './detail?id=' + e.c_work_id
	});
}
</script>

<style lang="scss" scoped>

.card-item-box {
	padding: 32rpx 24rpx 0 28rpx;
}

::v-deep .card-item-box .e-card__left{
	margin: 0!important;
	margin-bottom: 32rpx!important;
}

::v-deep .card-item-box .e-card__header{
	margin-top: 6rpx!important;
}

.content-img {
	background-image: url(../../../static/img/rdsImgs/top_bssq_blue.jpg);
	background-size: 100% 420rpx;
	background-repeat: no-repeat;
	width: 100%;
	height: 420rpx;
}

.nodata {
	width: 100%;
	height: 560rpx;

	image {
		width: 100%;
		height: 80%;
		opacity: 0.4;
	}
}

.image-min {
	width: 100%;
	height: 100rpx;
	opacity: 0.4;
}

.e-attachment {
		align-items: center;
		justify-content: center;
		display: flex;

		&__image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
}

::v-deep .data-card.e-card:first-of-type{
	.e-card__content{
		margin-left: 28rpx;
		margin-right: 28rpx;
	}
}

::v-deep .e-card:nth-of-type(2) .e-card__content{
	margin: 0!important;
}

::v-deep .tab-item:nth-of-type(1){
    padding-left: 50rpx!important;
    margin-left: 0!important;
}

::v-deep .tab-item:nth-of-type(4){
    padding: 0rpx!important;
    margin-left: 0!important;
    margin-right: 50rpx!important;
}

</style>